<template>
<div>
    <button @click="isInto = !isInto; isShow = !isShow" v-if="isShow" class="button"><img src="@/assets/images/message.png" height="50px" class="message"></button>
    <div v-if="isInto" class="message_box">
        <div class="leave">
            <p><span>WeBlog</span></p>
            <p><span>给本站留言,让我们变得更好!</span></p>
        </div>
        <form action="/">
            <b-form-textarea
                id="textarea"
                v-model="messageBoard.message"
                placeholder="Enter something..."
                rows="8"
                max-rows="6"
            ></b-form-textarea>
            <label for="input-formatter">你的呢称：</label>
            <b-form-input
                id="input-formatter"
                v-model="messageBoard.name"
                :formatter="format"
                placeholder="Enter your name"
                aria-describedby="input-formatter-help"
            ></b-form-input>
            <label for="input-lazy">你的邮箱：</label>
            <b-form-input
                id="input-lazy"
                v-model="messageBoard.email"
                :formatter="format"
                placeholder="Enter your email"
                aria-describedby="input-lazy-help"
                lazy-formatter
            ></b-form-input>
    
        </form>
        <b-button variant="outline-primary" @click="addMessage()">提交</b-button>
        <b-button variant="outline-primary" @click="closeMessage()">取消</b-button>
    </div>   
</div>   
</template>

<script>
import { createdMessageBoard } from '@/../api/api.js'
import Axios from 'axios'
export default {
    name: 'MessageBoard',
    components:{

    },
    data(){
        return {
            isInto: false,
            isShow: true,
            messageBoard:{
                message:"",
                name:"",
                email:""
            }
        }  
    },
    methods: {
        addMessage() {
            Axios.post(createdMessageBoard,this.messageBoard).then(Response =>{
                if (Response.data.message == 'success') {
                    window.alert("提交成功，谢谢你的留言！");
                    this.messageBoard = {
                        message: "",
                        name:"",
                        email:""
                    };
                    this.isInto = !this.isInto;
                    this.isShow = !this.isShow;
                }
            })
            .catch(err => {
                console.log(err);
            })
            
        },
        closeMessage() {
            this.isInto = !this.isInto;
            this.isShow = !this.isShow;
        }
    }
    
}
</script>

<style lang="stylus" scoped>
.button
    position fixed
    bottom $float_button_bottom
    right $float_button_right
    width $float_button_width
    height $float_button_height
    background-color: #fff
    padding 0
    border-radius 50%
    z-index 99
    outline none
    :hover
        transform: scale(1.2)
.message_box
    position fixed
    width 360px
    height 500px
    background-color #fff
    bottom 90px                
    right 30px
    border none
    border-radius 12px
    box-shadow 0 0 8px rgba(219, 216, 216,0.8)
    .leave
        background linear-gradient(135deg,#736EFE,#5EFCE8)
        height 150px
        border-top-left-radius 12px
        border-top-right-radius 12px
        p
            padding 25px 0 0 20px
            & > p:first-child
                margin-top 2px
        
    .into
        padding-top 20px
        padding-left 25px

</style>